import React, { PureComponent } from 'react';
import { Modal, Form, Select, Button, List, Pagination } from 'antd';
import SendCusMediaMsgModal from '../SendCusMediaMsgModal';
import moment from 'moment';

const FormItem = Form.Item;
const ListItem = List.Item;
const { Option } = Select;

@Form.create()
class ShowCusMediaMsgModal extends PureComponent {
  state = {
    type: 'news',
    media_id: '',
    sendMediaMsgModalVisible: false,
  };

  handleSubmit = e => {
    const that = this;
    e.preventDefault();
    const { appid, form, getMediaList } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        getMediaList(appid, values.msgType);
        that.setState({
          type: values.msgType,
        });
      }
    });
  };

  handleCancel = () => {
    this.props.form.resetFields();
    this.props.onCancel();
    this.setState({
      type: 'news',
    });
  };

  pageChange = page => {
    const { appid, getMediaList } = this.props;
    const { type } = this.state;
    getMediaList(appid, type, page);
  };

  // 显示发送modal
  showSendModal = (id) => {
    this.setState({
      media_id: id,
      sendMediaMsgModalVisible: true
    })
  };

  // 发送素材客服消息处理成功回调
  handleSendMediaMsgOk = v => {
    this.props.onOk(v);
    this.setState({
      sendMediaMsgModalVisible: false,
    });
  };

  // 发送取消回调
  handleSendMediaMsgCancel = () => {
    // 设置modal不可见
    this.setState({
      sendMediaMsgModalVisible: false,
    });
  };

  render() {
    const { sendMediaMsgModalVisible, media_id, type } = this.state;
    const { visible, appid, form, mediaList, loading } = this.props;
    const { getFieldDecorator } = form;

    return (
      <div>
        <Modal
          title="发送素材消息"
          visible={visible}
          style={{ top: 150 }}
          footer={null}
          width={900}
          onCancel={this.handleCancel}
        >
          <Form onSubmit={this.handleSubmit} layout="inline">
            <FormItem label="所属Appid">{appid}</FormItem>
            <br />
            <FormItem label="素材消息类型">
              {getFieldDecorator('msgType', {
                initialValue: 'news',
              })(
                <Select style={{ width: 120 }}>
                  <Option value="news">图文消息</Option>
                  <Option value="image">图片</Option>
                  <Option value="voice">语言</Option>
                  <Option value="video">视频</Option>
                </Select>
              )}
            </FormItem>
            <Button type="primary" htmlType="submit">
              查询素材消息
            </Button>

            <List
              loading={loading}
              itemLayout="horizontal"
              dataSource={mediaList.item}
              renderItem={item => (
                <ListItem actions={[<Button type="primary" onClick={() => this.showSendModal(item.media_id)}>发送此消息</Button>]}>
                  <div style={{ width: '80%' }}>
                    {item.content &&
                      item.content.news_item.map((value, key) => <div key={key}>{value.title}</div>)}
                    {item.url && (
                      <div>
                        <img style={{ width: 200, height: 100, float: 'left' }} src={item.url} />
                        <div style={{ float: 'left' }}>{item.name}</div>
                      </div>
                    )}
                  </div>
                  <div style={{ margin: 'auto' }}>
                    {moment(item.update_time * 1000).format('MM-DD')}
                  </div>
                </ListItem>
              )}
            />
            <Pagination onChange={this.pageChange} total={mediaList.total_count} />
          </Form>
        </Modal>

        <SendCusMediaMsgModal
          visible={sendMediaMsgModalVisible}
          appid={appid}
          media_id={media_id}
          media_type={type}
          loading={loading}
          onOk={this.handleSendMediaMsgOk}
          onCancel={this.handleSendMediaMsgCancel}
        />
      </div>
    );
  }
}

export default ShowCusMediaMsgModal;
